<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-select v-model="query.siteId" clearable filterable size="small" placeholder="站点" class="filter-item" style="width: 210px" @change="crud.toQuery">
          <el-option v-for="item in siteList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input v-model="query.description" clearable placeholder="问题描述" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.module" clearable size="small" placeholder="模块" class="filter-item" style="width: 120px" @change="crud.toQuery">
          <el-option v-for="item in dict.feedback_module" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.status" clearable size="small" placeholder="解决状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.handler" clearable filterable size="small" placeholder="处理人" class="filter-item" style="width: 210px" @change="crud.toQuery">
          <el-option v-for="item in usersList" :key="item.value" :label="item.label+'（'+item.discipline+'）'" :value="item.value" />
        </el-select>
        <el-input v-model="query.creator" clearable placeholder="提出人姓名" style="width: 115px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.isPublish" clearable size="small" placeholder="发布状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
          <el-option v-for="item in publishStatusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="90px">
          <el-form-item label="问题描述" prop="description">
            <el-input v-model="form.description" :rows="3" type="textarea" style="width: 370px;" :disabled="crud.form.feedbackId!==null||isView()" />
          </el-form-item>
          <el-form-item label="提出时间" prop="createTime">
            <el-input v-model="form.createTime" style="width: 370px;" :disabled="crud.form.createTime!==null||isView()" />
          </el-form-item>
          <el-form-item label="图片">
            <el-image
              v-if="form.image1"
              style="width: 120px; height: 120px"
              :src="formatImage(form.image1)"
              :preview-src-list="[formatImage(form.image1)]"
            />
            <el-image
              v-if="form.image2"
              style="width: 120px; height: 120px"
              :src="formatImage(form.image2)"
              :preview-src-list="[formatImage(form.image2)]"
            />
            <el-image
              v-if="form.image3"
              style="width: 120px; height: 120px"
              :src="formatImage(form.image3)"
              :preview-src-list="[formatImage(form.image3)]"
            />
            <el-image
              v-if="form.image4"
              style="width: 120px; height: 120px"
              :src="formatImage(form.image4)"
              :preview-src-list="[formatImage(form.image4)]"
            />
            <el-image
              v-if="form.image5"
              style="width: 120px; height: 120px"
              :src="formatImage(form.image5)"
              :preview-src-list="[formatImage(form.image5)]"
            />
            <el-image
              v-if="form.image6"
              style="width: 120px; height: 120px"
              :src="formatImage(form.image6)"
              :preview-src-list="[formatImage(form.image6)]"
            />
          </el-form-item>
          <el-form-item label="模块" prop="module">
            <el-select v-model="form.module" filterable placeholder="请选择" style="width: 370px" :disabled="crud.form.feedbackId!==null||isView()">
              <el-option
                v-for="item in dict.feedback_module"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处理人" prop="handler">
            <el-select v-model="form.handler" placeholder="请选择" filterable default-first-option style="width: 370px;" :disabled="isView()||!adminFlag" @change="hanlerChange">
              <el-option v-for="item in usersList" :key="item.value" :value="item.value" :label="item.label+'（'+item.discipline+'）'" />
            </el-select>
          </el-form-item>
          <el-form-item label="解决状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择" filterable default-first-option style="width: 370px;" :disabled="isView()">
              <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 370px;" :maxlength="1000" :disabled="isView()" />
          </el-form-item>
          <el-form-item label="提出人姓名">
            <el-input v-model="form.creator" style="width: 370px;" :disabled="crud.form.feedbackId!==null||isView()" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="!isView()" style="margin-right:10px" @click="crud.cancelCU">取消</el-button>
          <el-button v-if="!isView()" :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          <el-button v-if="isView()" type="primary" @click="crud.cancelCU">关闭</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 330px)" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" :selectable="selectable" />
        <el-table-column prop="description" label="问题描述">
          <template v-slot="{ row }">
            <el-link type="primary" @click="viewDetail(row.feedbackId)">{{ row.description }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="module" label="模块">
          <template slot-scope="scope">
            {{ dict.label.feedback_module[scope.row.module] }}
          </template>
        </el-table-column>
        <el-table-column prop="createUser" label="角色" :formatter="formatRoles" />
        <el-table-column prop="status" label="解决状态" :formatter="formatterStatus" />
        <el-table-column prop="createTime" label="提出时间" />
        <el-table-column prop="creator" label="提出人姓名">
          <template v-slot="{ row }">
            <el-link type="primary" @click="viewInfo(row)">{{ row.creator }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="isPublishName" label="发布状态" />
        <el-table-column prop="site.name" label="站点" />
        <el-table-column prop="createUser.dept.name" label="组织" />
        <el-table-column v-if="checkPer(['admin','feedback:edit','feedback:del'])" label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
              :disabled-edit="!adminFlag&&user.id!==scope.row.handler"
            >
              <el-button slot="right" v-permission="permission.publish" icon="el-icon-position" :disabled="scope.row.status!==2||scope.row.isPublishName==='已发布'" size="mini" type="text" @click="publish(scope.row.feedbackId)">
                发布
              </el-button>
              <!-- </el-tooltip> -->
            </udOperation>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <PersonalInfo :show-info.sync="showInfo" :user-info="userInfo" />
  </div>
</template>

<script>
import crudFeedback from '@/api/information/feedback'
import CRUD, { presenter, header, form, crud } from '@brotherCrud/crud'
import rrOperation from '@brotherCrud/RR.operation'
import crudOperation from '@brotherCrud/CRUD.operation'
import udOperation from '@brotherCrud/UD.operation'
import pagination from '@brotherCrud/Pagination'
import { mapGetters } from 'vuex'
import PersonalInfo from '@/views/information/components/personalInfo'
import { usersList } from '@/api/system/user'
import { getSiteList, publish } from '../../../api/feedback'

const defaultForm = { feedbackId: null, description: null, image1: null, image2: null, image3: null, image4: null, image5: null, image6: null, module: null, handler: null, status: null, remark: null, creator: null, createBy: null, updateBy: null, createTime: null, updateTime: null, dept: null }
export default {
  name: 'Feedback',
  components: { PersonalInfo, pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['feedback_module'],
  cruds() {
    return CRUD({ title: '问题反馈', url: 'api/feedback', idField: 'feedbackId', sort: 'feedbackId,desc', crudMethod: { ...crudFeedback }})
  },
  data() {
    return {
      siteList: [], // 站点列表
      pageType: '',
      userInfo: {}, // 用户信息
      showInfo: false, // 查看个人信息
      usersList: [], // 用户列表
      adminFlag: false, // 是否股份管理员
      statusList: [
        { label: '待处理', value: 0 },
        { label: '处理中', value: 1 },
        { label: '已解决', value: 2 }
      ],
      publishStatusList: [
        { label: '待发布', value: 0 },
        { label: '已发布', value: 1 }
      ],
      permission: {
        add: ['admin', 'feedback:add'],
        edit: ['admin', 'feedback:edit'],
        del: ['admin', 'feedback:del'],
        download: ['admin', 'feedback:download'],
        publish: ['admin', 'feedback:publish']
      },
      rules: {
        description: [
          { required: true, message: '问题描述不能为空', trigger: 'blur' }
        ],
        module: [
          { required: true, message: '模块不能为空', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
        ],
        handler: [
          { required: true, message: '处理人不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '解决状态不能为空', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '备注不能为空', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'description', display_name: '问题描述' },
        { key: 'module', display_name: '模块' },
        { key: 'status', display_name: '解决状态' },
        { key: 'creator', display_name: '提出人姓名' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'user'
    ])
  },
  created() {
    this.crud.optShow.add = false
    this.hanleUsersList()
    this.user.roles.map(item => {
      if (item.id === 1 || item.id === 4) {
        this.adminFlag = true
      }
    })
    this.getList()
  },
  methods: {
    // 获取站点列表
    getList() {
      getSiteList({}).then(data => {
        if (data) {
          this.siteList = data.map(object => {
            return {
              value: object.siteId,
              label: object.name
            }
          })
        }
      })
    },

    /* 编辑前*/
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.pageType = 'edit'
    },
    /* 设置当前行是否可选*/
    selectable(row) {
      if (!this.adminFlag && this.user.id !== row.handler) {
        return false
      } else {
        return true
      }
    },
    // 是否查看
    isView() {
      if (this.pageType === 'view') {
        return true
      } else {
        return false
      }
    },
    // 查看
    viewDetail(feedbackId) {
      this.crud.data.map((item, index) => {
        if (item.feedbackId === feedbackId) {
          this.crud.toView(this.crud.data[index], 'view')
          this.pageType = 'view'
        }
      })
    },
    // 格式化用户角色
    formatRoles(row) {
      const roles = row.createUser.roles.filter(item => item.name.indexOf('模块') === -1)
      let role = ''
      roles.forEach(item => {
        if (role !== '') {
          role = role + '，' + item.name
        } else {
          role = item.name
        }
      })

      return role
    },
    /* 查看个人信息*/
    viewInfo(row) {
      this.userInfo = row.createUser
      this.showInfo = true
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 格式化图片地址
    formatImage(url) {
      let urlF = ''
      if (url) {
        if (url.indexOf('\\') === -1) {
          urlF = this.baseApi + '/file/意见反馈/' + url.substring(url.lastIndexOf('/') + 1)
        } else {
          urlF = this.baseApi + '/file/意见反馈/' + url.substring(url.lastIndexOf('\\') + 1)
        }
      }
      return urlF
    },
    // 格式化解决状态
    formatterStatus(rowData) {
      let x = null
      switch (rowData.status) {
        case 0:x = '待处理'
          break
        case 1:x = '处理中'
          break
        case 2:x = '已解决'
          break
        default:
          x = '未知'
      }
      return x
    },
    // 取得获取用户列表
    hanleUsersList() {
      usersList({
        page: 0,
        size: 10000 }).then(data => {
        if (data) {
          data.map(object => {
            if (object && object.dept && object.dept.name === '股份总部') {
              this.usersList.push({
                value: object.id,
                label: object.nickName,
                discipline: object.jobs[0].name
              })
            }
          })
        }
      })
    },
    // 指派给下拉框改变
    hanlerChange(val) {
      if (val) {
        // 有指派人，变成处理中
        this.form.status = 0
      }
    },
    // 发布
    publish(feedbackId) {
      const params = {
        feedbackId: feedbackId,
        isPublish: 1
      }
      publish(params).then(data => {
        this.$notify({
          title: '问题发布',
          message: '问题发布成功',
          type: 'success'
        })
        this.crud.data.map(function(item) {
          if (item.feedbackId === feedbackId) {
            item.isPublishName = '已发布'
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
